<template lang="html">
  <div>
    <div class="nav-footer">
      <ul>
        <router-link tag="li" to="/home">
          <i class="iconfont icon-shouye"></i>
          <span>首页</span>
        </router-link>
        <router-link tag="li" to="/shop">
          <i class="iconfont icon-shandian"></i>
          <span>闪送超市</span>
        </router-link>
        <router-link tag="li" to="/cart">
          <i class="iconfont icon-gouwuche"></i>
          <div class="cartNum" v-if=" cartNumber > 0||cartNumber==='99+' ? true : false">{{ cartNumber }}</div>
          <span>购物车</span>
        </router-link>
        <router-link tag="li" to="/mine">
          <i class="iconfont icon-wode"></i>
          <span>我的</span>
        </router-link>
      </ul>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex"

export default {
  name: 'FooterNav',
  data() {
    return {
      num: 0,
      flag : false
    }
  },
  computed:{
    ...mapGetters({
      cartNumber : 'cart/cartTotalNum_view'
    })
  },
  methods: {

  }
}

</script>
<style lang="less" scoped>
.nav-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 999;
  ul {
    display: flex;
    
    li {
      padding: 0.1rem 0;
      flex: 1;
      text-align: center;
      position: relative;
      i {
        display: block;
        font-size: 0.45rem;
        margin-bottom: 0.1rem;
      }
    }
  }
}
.active i{
    color:#ffd600;
}
.cartNum{
  position: absolute;
  top: 2%;
  right: 20%;
  transform: translateX(-10%);
  width: 0.44rem;
  height:0.44rem;
  text-align:center;
  line-height: 0.44rem;
  background: red;
  border-radius:50%;
  color: #fff;
}
</style>
